<template>
  <div id="homeducate">
    <div class="navbanner lunbo" >
			  <img src="../../static/images/homeducate.png" class=""/>
        <div class="tour-nab">
            <ul class="nav nav-pills recruit-ul">
                 <li>
                    <router-link to="/activity">
                        <a href="javascript:void(0);">优秀作品</a>
                    </router-link>
                 </li>
                <li>
                    <router-link to="/activity/exactivity">
                        <a href="javascript:void(0);">精彩活动</a>
                    </router-link>
                </li>
                <li class="active-underline">
                    <router-link to="/activity/homeducate">
                        <a href="javascript:void(0);">家园共育</a>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <h1 class="t_nav">
          <p class="n1">活动风采</p>
          <div class="rt">当前位置：
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/activity' }">活动风采</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/activity/homeducate' }">家园共育</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </h1>
      <div class="navbanner clearfix" style="margin-top: 0;">
        <div class="content">
          <div style="height: 420px;">
            <!-- 家园共育列表 -->
            <ul class="listMain">
              <li v-for="(temp,index) in newsList" @click="toDetail(temp)">
                <a class="lf" href="javascript:void(0);">{{temp.title.substring(0,30)+"..."}}</a>
                <span class="rt">[{{ temp.createTime }}]</span>
              </li>
            </ul>
          </div>

          <div class="slide">
            <marquee scrollamount="10" scrollDelay=3 direction=left width="100%" height="180" loop=-1>
              <table>
                  <tr>
                    <td alt="2020年心理活动蒙面歌舞会" title="2020年心理活动蒙面歌舞会"><img src="../../static/images/homeducate.png" class="slideimg" /></td>
                    <td alt="2020年心理活动蒙面歌舞会" title="2020年心理活动蒙面歌舞会"><img src="../../static/images/newscenter.png" class="slideimg" /></td>
                    <td alt="2020年心理活动蒙面歌舞会" title="2020年心理活动蒙面歌舞会"><img src="../../static/images/banner06.png" class="slideimg" /></td>
                  </tr>
                </table>
            </marquee>
          </div>
        </div>

         <!-- 分页 -->
        <br/>
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
             :page-size="pageSize"
            :total="pageTotal"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import request from '../utils/request'
export default {
  data () {
    return {
      newsList: [],
      url:{
        newsList: '/sunNews/list',
        newsDetail:'/sunNews/queryById',
        category: "/sunCategory/list",
      },
      categoryList:[],
      category:null,
      //分页相关
      pageNo:1,
      pageTotal:10,
      pageSize:3,
      pager:1
    }
  },
  components: {
    // 注册组件
  },
  mounted () { },
  created () {
    this.category = 5
    // pageNo=1
     //获取分类
    this.getNewsList(5,this.pageNo)
     //获取分类列表
    this.getCategoryList()

  },
  methods: {

    //跳转新闻详情页面
    toDetail(data){
      this.$router.push("/subjectInfo?id="+data.id)
    },
     //获取分类表
    getCategoryList () {
      request.get(this.url.category)
        .then((res) => {
          if (res.data.success) {
            console.log(res.data.result)
            this.categoryList = res.data.result.records
            console.log(this.categoryList)
          }
        }).catch((error)=>{
        console.log(error)
      })
    },
  //获取新闻
    getNewsList (category,pageNo) {
      request.get(this.url.newsList,{
        params:{
          pageNo:pageNo,
          pageSize:5,
          category:category
        }
      })
        .then((res) => {
          if (res.data.success) {
            this.newsList = res.data.result.records
            this.pageTotal =res.data.result.total
            // console.log( )
          }
        }).catch((error)=>{
        console.log(error)
      })
    },
  //分页点击事件
    pageChange(pageNo){
      this.getNewsList(this.category,pageNo)
    },

  }
}
</script>

<style>
#homeducate .navbanner .content{
  height: 800px;
}
</style>
